<template>
  <section class="contentCon">
    <div><el-button icon="el-icon-back" class="back" @click="clickback">返回产品管理</el-button></div> 
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="line-height: 36px;">产品详情</span></div></el-col>
      </el-row>
      <el-tabs type="border-card" v-model="activeCard">
        <el-tab-pane label="产品概述" name="product">
          <div class="prod-top">
               <div class="prod-detail-content">
                    <p class="title prod-content">{{product.name}}</p>
                    <p class="prod-type">{{product.typeName}}</p>
                    <button>编辑</button>
               </div>
               <div class="prod-key-content">
                    <p class="title center">产品ID</p>
                    <p class="prod-content center" style="word-break: break-word;">{{product.prodKey}}</p>
               </div>
                <div class="prod-create-time-content">
                    <p class="title center">创建时间</p>
                    <p class="prod-content center">{{utils.timestampToTime(product.createTime)}}</p>
               </div>
                <div class="prod-protocol-content">
                    <p class="title center">通信协议</p>
                    <p class="prod-content center">{{product.protocol}}</p>
               </div>
               <div class="clear"></div> 
          </div>
          <div class="prod-center">
               <div class="prod-total-content">
                    <img class="center" src="@/assets/total_device.png" style="width: 38px;height: 38px;"/>
                    <p class="center">设备总数</p>
                    <p class="center">{{numTotal}}</p>
               </div>
               <div class="prod-online-content">
                    <img class="center" src="@/assets/online_device.png" style="width: 38px;height: 38px;"/>
                    <p class="center">设备在线数</p>
                    <p class="center">{{numOnline}}</p>
               </div>
               <div class="clear"></div> 
          </div>
          <div style="padding: 15px;margin-top: 39px;">设备数趋势图</div>
          <div class="clear"></div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="jobDeviceSearch">
          </el-date-picker>
          <div id="container_device" class="culri" style="margin-top:20px;height:400px"></div>
        </el-tab-pane>
        <el-tab-pane label="物模型" name="service">
        <div style="height: 50px;">
          <span style="line-height:40px;">自定义参数</span>
          <el-button type="primary" style="margin-right:10px;float:right" @click="operationParam('add')">添加</el-button>
          <div class="clear"></div>
        </div>

        <!--自定义参数列表-->
        <el-table
          :data="tableProperty"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="属性名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="identifier"
            label="标识符"
            width="180">
          </el-table-column>
          <el-table-column
            prop="canRw"
            label="读写属性"
            width="100">
               <template scope="scope">
               <div  v-if="scope.row.canRw==0">只读</div>
               <div  v-else-if="scope.row.canRw==1">只写</div>
               <div  v-else-if="scope.row.canRw==2">可读可写</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="数据类型"
            width="180">
            <template scope="scope">
               <div  v-if="scope.row.type==1">INT</div>
               <div  v-else-if="scope.row.type==2">STRING</div>
               <div  v-else-if="scope.row.type==3">ENUM</div>
            </template>
          </el-table-column>
          <el-table-column
            label="功能点属性"
            width="360">
            <template scope="scope">
               <div class="product-type-sd">
                  <p v-if="scope.row.type==1"><span>最大值:</span><span class="param-value">{{scope.row.max}}</span>&nbsp;&nbsp;<span>最小值:</span><span class="param-value">{{scope.row.min}}</span></p>
                  <p v-if="scope.row.type==1"><span>单位名称:</span><span class="param-value">{{scope.row.unitName}}</span>&nbsp;&nbsp;<span>单位符号:</span><span class="param-value">{{scope.row.unit}}</span></p>
                  <p v-else-if="scope.row.type==3"><span>枚举值:</span><span class="param-value">{{scope.row.enumValues}}</span></p>
               </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="descp"
            label="描述">
          </el-table-column>
          <el-table-column label="" fixed="right" width="150">
            <template scope="scope">
                <el-button type="primary" size="small" @click="operationParam('update', scope.row)">修改</el-button>
                <el-button type="danger" size="small" @click="deleteParam(scope.row)">删除</el-button>
                <div class="clear"></div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="height: 50px;margin-top: 10px;">
          <span style="line-height:40px;">命令</span>
          <el-button type="primary" style="margin-right:10px;float:right"  @click="operationCmd('add')">添加</el-button>
          <div class="clear"></div>
        </div> -->

        <!--自定义参数列表-->
        <!-- <el-table
          :data="tableCmd"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="命令名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="identifier"
            label="标识符"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cmdId"
            label="cmdId"
            width="80">
          </el-table-column>
          <el-table-column
            prop="type"
            label="命令类型"
            width="120" :formatter="formatCmd">
          </el-table-column>
          <el-table-column
            prop="content"
            label="命令示例"
            width="90">
            <template slot-scope="scope">
              <el-button type="text" style="text-decoration:underline" @click="showCmdDeatail(scope.row)">点击查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="descp"
            label="描述">
          </el-table-column>
          <el-table-column label="" fixed="right" width="150">
            <template scope="scope">
              <el-button type="primary" size="small" @click="operationCmd('update',scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="deleteCmd(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table> -->
        </el-tab-pane>
        <el-tab-pane label="设备列表" name="devices">
          <!--表格-->
          <el-table
            :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
            border
            style="width: 100%"
            @filter-change="fiterChangeEvent">
            <el-table-column
              prop="deviceName"
              label="设备名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="deviceId"
              label="设备ID"
              width="180">
            </el-table-column>
            <el-table-column
              prop="imei"
              label="IMEI"
              width="180">
            </el-table-column>
            <el-table-column
              prop="deviceStatus"
              label="状态"
              width="90"
              :formatter="formatSex"
              :filters="[{ text: '已注册', value: 0 }, { text: '已激活', value: 1 }, { text: '已注销', value: 2 }]"
            :column-key="'deviceStatus'"
            filter-placement="bottom-end">
            </el-table-column>
            <el-table-column
              prop="netStatus"
              label="在线离线"
              width="90"
              :formatter="formatOnline" 
              :filters="[{ text: '在线', value: 1 }, { text: '离线', value: 2 }]"
             :column-key="'netStatus'"
             filter-placement="bottom-end">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="180" :formatter="formatCreateTime">
            </el-table-column>
            <el-table-column
              prop="onlineAt"
              label="最后上线时间"
              width="180" :formatter="formatOnlineAtTime">
            </el-table-column>
            <el-table-column
              prop="offlineAt"
              label="最后离线时间"
              width="180" :formatter="formatOfflineAtTime">
            </el-table-column>
            <el-table-column label="">
              <template scope="scope">
                <el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="tableData.length">
            </el-pagination>
          </div>
        </el-tab-pane>
          <el-tab-pane label="告警推送" name="push_rule">
            <push-rule :prodKey=this.$route.query.prodKey></push-rule>
            </el-tab-pane> 
          <el-tab-pane label="其他设置" name="other_setting">
            <div style="height: 50px;">
            <el-button type="primary" style="margin-right:10px;float:right" @click="saveOtherSetting">保存</el-button>
            <div class="clear"></div>
            </div>
            <el-form  :model="product" label-position="top">
              <el-col :span="24">
                <el-form-item
                label="是否强制绑定(默认值:是)"
                prop="type"
                :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                >
                <el-select v-model="product.isForcebind" placeholder="请选择" clearable style="width: 180px;">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
                </el-select>
                </el-form-item>
            </el-col>
              <el-col :span="24">
                <el-form-item
                    label="心跳设置(秒)(默认值:180)"
                    prop="heartTime"
                  >
                    <el-input-number v-model="product.heartTime" :min="1" label="心跳设置"></el-input-number>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                    label="最大授权人数(默认值:5)"
                    prop="heartTime"
                  >
                    <el-input-number v-model="product.maxAuth" :min="1" :max="5" label="最大授权人数"></el-input-number>
                  </el-form-item>
              </el-col>
            </el-form> 
          </el-tab-pane> 
      </el-tabs>

    <param-edit ref="paramDialog"
      :visible.sync="paramVisible"
      :operation="operation2"
      :param="myParam"
      :dynamicTags="tagsList"
      @confirm="confirmParam"
    />
    <cmd-edit ref="cmdDialog"
      :visible.sync="cmdVisible"
      :cmd="cmd"
      :listin="propertiesIn"
      :listout="propertiesOut"
      :operation="operation"
      :visibleHeader.sync="paramSelectEmpty"
      @confirm="confirmCmd"
    />
    <cmd-show ref="cmdDetailDialog"
      :visible.sync="cmdShowVisible"
      :listin="paramlist"
      :isDown="isCmdDown"
      :cmdId="selectedCmd">
    </cmd-show>
  </section>
</template>
<script type="text/ecmascript-6">
import { deviceService, productService } from '@/services';
import utils from '@/utils.js';
import echarts from 'echarts';
import cmdEdit from '@/views/product/cmdEdit';
import paramEdit from '@/views/product/paramEdit';
import cmdShow from '@/views/product/cmdShow';
import pushRule from '@/views/product/pushRule';
export default {
  data () {
    var date = new Date(new Date().toLocaleDateString());
    var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
    return {
      product: {},
      deviceRends:[],
      numTotal: 0,
      numOnline: 0,
      tableData: [],
      deviceStatusFiter: '',
      netStatusFilter: '',
      currentPage: 1,
      activeCard: "product",
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [lastDate, date],
      tableProperty: [],
      propertiesIn: [],
      tableCmd: [],
      cmdVisible:false,
      paramVisible:false,
      cmd: {},
      myParam: {},
      operation: 'add',
      operation2: 'add',
      propertiesOut: [],
      paramSelectEmpty: true,
      cmdShowVisible: false,
      selectedCmd: 0,
      paramlist: [],
      isCmdDown: false,
      tagsList:[],
    };
  },
  components: { cmdEdit, paramEdit, cmdShow, pushRule },
  activated() {
    var date = new Date(new Date().toLocaleDateString());
    var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);
    this.value1 = [];
    this.value1[0] = lastDate;
    this.value1[1] = date;
    this.activeCard = "product";
    this.product = {};
    this.numTotal = 0;
    this.numOnline = 0;
    this.getProductDetail();
  },
  watch:{
      paramVisible(val, oldVal){//普通的watch监听
          if(val==true){
            this.$refs.paramDialog.resetForm();
          }
      },
      cmdVisible(val, oldVal) {
         if(val==true){
           this.$refs.cmdDialog.resetForm();
         }
      }
  },
  methods: {
    jobDeviceSearch() {
      console.log(this.value1);
      if(this.value1!=undefined){
        this.getDeviceRends();
      }
    },
    clickback () {
      this.$router.go(-1);
    },
    async saveOtherSetting () {
      try {
       await productService.updateProductSetting(this.product);
       this.$message.success('保存成功');
      }catch (e) {

      }
    },
    async getDeviceList () {
      if(utils.isEmpty(this.$route.query.prodKey)){
       this.$message.error('prodKey不能为空');
        return;
      }

      this.tableData = await deviceService.getDeviceList('', this.$route.query.prodKey, this.deviceStatusFiter, this.netStatusFilter);
      this.getPropertyList();
    },
    async getProductDetail () {
      if(utils.isEmpty(this.$route.query.prodKey)){
       this.$message.error('prodKey不能为空');
        return;
      }

      const {product,total,onlineNum} = await productService.getProductDetail(this.$route.query.prodKey);
      this.getDeviceRends();
      this.product = product;
      this.numTotal = total;
      this.numOnline = onlineNum;
      this.getDeviceList();
    },
    async getDeviceRends () {
       this.deviceRends = await productService.getDevicesRend(this.$route.query.prodKey,this.value1[0].getTime(),this.value1[1].getTime());
       this.refreshChart();
    },
    async getPropertyList () {
      if(utils.isEmpty(this.$route.query.prodKey)){
       this.$message.error('prodKey不能为空');
        return;
      }
      this.tableProperty = await productService.getPropertyList(this.$route.query.prodKey);
      this.getCmdList();
    },
    async getCmdList () {
      if(utils.isEmpty(this.$route.query.prodKey)){
       this.$message.error('prodKey不能为空');
        return;
      }
      this.tableCmd = await productService.getCmdList(this.$route.query.prodKey);
    },
    onSubmit (e) {
      let target = e.target;
      // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。
      // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生效，所以要加一层判断。
      if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
        target = e.target.parentNode;
      }
      target.blur();
      if (utils.isEmpty(this.searchImei)) {
        this.searchImei = "";
      }
      this.currentPage = 1;
      this.getDeviceList();
    },
    handleDetail (index, row) {
      var deviceId = row.deviceId;
      if(row.prodKey === '15134891' || row.prodKey === '15190721'){
        let { href } = this.$router.resolve({ path: '/deviceDetailProfileGC', query: { deviceId: deviceId } });
        window.open(href, '_blank');
      }else{
        if(row.platform==='master'){
          let { href } = this.$router.resolve({ path: '/deviceCommon', query: { deviceId: deviceId } });
           window.open(href, '_blank');
        }else{
          let { href } = this.$router.resolve({ path: '/deviceDetail', query: { deviceId: deviceId } });
           window.open(href, '_blank');
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line
        console.log(`当前页: ${val}`);
      }
    },
    refreshChart() {
      var dom = document.getElementById("container_device");
      var myChart = echarts.init(dom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {   // 格式化函数
            return utils.timestampToDate(params[0].axisValue) + "<br>设备数量:" + params[0].data[1];
          },
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            formatter: function(val) {
              return val;
            }
          }
        },
        series: [
          {
            name: '设备数',
            type: 'line',
            stack: '总量',
            smooth: true,
            stack: 'Total',
            axisLabel: {
              formatter: function(val) {
                return val;
              }
            },
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            // data: [[1635831402934, 0],[1636320274702, 1], [1637320374702, 100], [1638320474702, 1]]
            data: this.deviceRends,
          },
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    formatOnline(row, column) {
      switch (row.netStatus) {
        case 1:
          return '在线';
        default:
          return '离线';
      }
    },
    formatSex(row, column) {
      switch (row.deviceStatus) {
        case 0:
          return '已注册';
        case 1:
          return '已激活';
        case 2:
          return '已注销';
        default:
          return '未知';
      }
    },
    formatCreateTime(row, column) {
      return utils.timestampToTime(row.createTime);
    },
    formatOnlineAtTime(row, column) {
      return utils.timestampToTime(row.onlineAt);
    },
    formatOfflineAtTime(row, column) {
        return utils.timestampToTime(row.offlineAt);
    },
    fiterChangeEvent(filters) {
       if(filters.deviceStatus !== undefined){
         this.deviceStatusFiter = '';
        filters.deviceStatus.forEach(element => {
          this.deviceStatusFiter += (element+',');
        });

       }else if(filters.netStatus !== undefined) {
          this.netStatusFilter = '';
          filters.netStatus.forEach(element => {
             this.netStatusFilter += (element+',');
          });
       }

       this.currentPage = 1;
       this.getDeviceList();
    },
    formatProperty(row, column) {
      switch (row.type) {
        case 1:
          return 'INT';
        case 2:
          return 'STRING';
        case 3:
          return 'FLOAT';
        default:
          return '未知';
      }
    },
    formatCmd(row, column) {
      switch (row.type) {
        case 0:
          return '上报帧';
        case 1:
          return '下发帧';
        default:
          return '未知';
      }
    },
    operationCmd (operation,cmd) {
      this.operation = operation; 
      if(operation==='add'){
        this.cmd = {};
        if(this.tableProperty.length==0){
          this.$message.error({'message':'产品还未添加参数，请先添加'});
          return;
        }

        if(this.tableCmd.length==0){
          this.cmd.cmdId = 1;
        }else{
          this.cmd.cmdId = (this.tableCmd[this.tableCmd.length-1].cmdId+1);
        }
        this.cmd.prodKey = this.$route.query.prodKey;
        this.propertiesIn = [];
        this.propertiesOut = [];
        this.tableProperty.forEach(item => {
           this.propertiesIn.push(item);
        });
        this.paramSelectEmpty = true;
      } else {
        this.cmd = Object.assign({},cmd);
        this.propertiesIn = [];
        this.propertiesOut = [];
        var array = cmd.content.split(',');
        console.log(array);
        this.tableProperty.forEach(item => {
        
             var flag  = array.indexOf(item.id.toString());
             if(flag === -1){
                this.propertiesIn.push(item);
             }else{
               this.propertiesOut.push(item);
             }
        });
        if(this.propertiesOut.length==0){
          this.paramSelectEmpty = true;
        }else{
          this.paramSelectEmpty = false;
        }
      }
      this.cmdVisible = true;
    },
    async confirmCmd () {
      try {
        this.cmdVisible = false;
        this.getCmdList();
      } catch (error) {
        console.log(error);
      }
    },
    operationParam (operation,param) {
      this.operation2 = operation;
      if(operation === 'add') {
        this.myParam = {};
         this.myParam.prodKey = this.$route.query.prodKey;
         this.tagsList =[];
      } else {
          this.myParam = Object.assign({}, param);
          if(utils.isEmpty(this.myParam.enumValues)){
                this.tagsList =[];
          }else{
                this.tagsList = JSON.parse(this.myParam.enumValues);
          }
      }
      this.paramVisible = true;
    },
    async confirmParam () {
      this.paramVisible = false;
      this.getPropertyList();
    },
   async deleteParam (param) {
      try {
        await this.$confirm('是否确认删除此参数?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
       await productService.deleteParam(param);
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getPropertyList();
      } catch (e) {
        console.error(e);
      }
    },
    async deleteCmd (cmd) {
      try {
        await this.$confirm('是否确认删除此命令?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
       await productService.deleteCmd(cmd);
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getCmdList();
      } catch (e) {
        console.error(e);
      }
    },
    showCmdDeatail(cmd){
        var array = cmd.content.split(',');
        this.selectedCmd = cmd.cmdId;
        this.paramlist = [];
        this.isCmdDown = (cmd.type==0?false:true);
        this.tableProperty.forEach(item => {
             var flag  = array.indexOf(item.id.toString());
             if(flag === -1){
             } else {
                if(item.type===2){
                  item.value1 = "a";
                }else if(item.type ===1){
                  item.value1 = 1;
                }else {
                  item.value1 = parseFloat('1.1');
                }
                this.paramlist.push(Object.assign({},item));
             }
        });
      this.cmdShowVisible = true;
    }
  },
};
</script>
<style>
  .bg-purple-dark {
    background: #f8f8f8;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
  }

 .prod-top {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    margin: 0;
    padding: 18px 21px;
 }
 
 .prod-detail-content {
   width: 29%;
   float: left;
 }
 
.prod-detail-content button {
  line-height: 25px;
  margin-left: 10px;
  color: #2dc6f6;
  background: white;
  cursor: pointer;
}

.prod-detail-content .title, .prod-key-content .title,.prod-create-time-content .title,.prod-protocol-content .title{
  margin-bottom: 23px;
}

.prod-detail-content .title{
  margin-left: 10px;
}

.prod-detail-content .center, .prod-key-content .center,.prod-create-time-content .center,.prod-protocol-content .center{
  text-align: center;
}
 
 .prod-type {
    float: left;
    height: 25px;
    line-height: 25px;
    background: #2dc6f6;
    font-size: 12px;
    padding: 0px 5px;
    border-radius: 5px;
    background-color: rgba(45,198,246,.1);
    border: 1px solid rgba(45,198,246,.2);
    color: #2dc6f6;
    margin-left: 10px;
 }

 .prod-key-content {
   width: 30%;
   float: left;
   border-left: 1px dashed #dcdfe6;
 }

  .prod-create-time-content {
   width: 20%;
   float: left;
   border-left: 1px dashed #dcdfe6;
 }

 .prod-protocol-content {
   width: 20%;
   float: left;
   border-left: 1px dashed #dcdfe6;
 }

 .prod-content {
   font-weight: bold;
 }

 .prod-center {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  margin: 0;
  padding: 18px 21px;
  width: 31%;
  margin-top: 30px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
 }

 .prod-total-content{
   width: 49%;
   float: left;
 }
  .prod-online-content{
   width: 49%;
   float: left;
   border-left: 1px dashed #dcdfe6;
 }

  .prod-total-content .center, .prod-online-content .center{ 
    margin: 0 auto;
    display: block;
    margin-bottom: 17px;
    text-align: center;
  }


.not-found {
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

 .not-found .code {
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
    margin-top: 16px;
  }
 .not-found .desc {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }
.el-pagination {
    text-align: center;
    margin-top: 30px;
  }
  .el-message-box__btns .cancel {
    float: right;
    margin-left: 10px;
  }

  .el-col-2 {
    height: 1px;
  }

  .product-type-sd {
      width: 100%;
      float: left;
  }

  .param-value {
    font-weight: bold;
    font-size: 20px;
  }
</style>